<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script>
    // 查询参数
    search_access_type = 'all'
    search_user_id = null
    search_start_date = null
    search_end_date = null

    $(function(){
        datePickerInit();
        accessRecordTableInit();
        searchActionInit();
    })

    // 日期选择器初始化
	function datePickerInit(){
		$('.form_date').datetimepicker({
			format:'yyyy-mm-dd',
			language : 'zh-CN',
			endDate : new Date(),
			weekStart : 1,
			todayBtn : 1,
			autoClose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			minView:2
		});
	}

	// 表格初始化
	function accessRecordTableInit(){
	    $('#accessRecordDOS').bootstrapTable({
	        columns:[{
	            field : 'id',
	            title : '记录ID'
	        },{
	            field : 'userID',
	            title : '用户ID'
	        },{
	            field : 'userName',
	            title : '用户名'
	        },{
	            field : 'accessTime',
	            title : '时间'
	        },{
	            field : 'accessIP',
	            title : 'IP'
	        },{
	            field : 'accessType',
	            title : '类型'
	        }],
	        url : 'systemLog/getAccessRecords',
            onLoadError:function(status){
                handleAjaxError(status);
            },
	        method : 'GET',
	        queryParams : queryParams,
            sidePagination : "server",
            dataType : 'json',
            pagination : true,
            pageNumber : 1,
            pageSize : 5,
            pageList : [ 5, 10, 25, 50, 100 ],
            clickToSelect : true
	    });
	}

	// 表格刷新
	function tableRefresh() {
		$('#accessRecordDOS').bootstrapTable('refresh', {
			query : {}
		});
	}

	// 分页查询参数
	function queryParams(params) {
		var temp = {
			limit : params.limit,
			offset : params.offset,
			userID : search_user_id,
			accessType : search_access_type,
			startDate : search_start_date,
			endDate : search_end_date
		}
		return temp;
	}

    // 查询操作
    function searchActionInit(){
        $('#search_button').click(function(){
            search_user_id = $('#user_id').val();
            search_access_type = $('#access_type').val();
            search_start_date = $('#start_date').val();
            search_end_date = $('#end_date').val();
            tableRefresh();
        })
    }
</script>

<div class="panel panel-default">
    <ol class="breadcrumb">
        <li>系统登陆日志</li>
    </ol>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                <form action="" class="form-inline">
                    <div class="form-group">
                        <label class="form-label">用户ID：</label>
                        <input type="text" id="user_id" class="form-control" placeholder="指定用户ID" style="width:50%">
                    </div>
                </form>
            </div>
            <div class="col-md-3">
                <form action="" class="form-inline">
                    <label class="form-label">记录过滤：</label>
                    <select name="" id="access_type" class="form-control">
                        <option value="all">显示所有</option>
                        <option value="loginOnly">仅显示登入记录</option>
                        <option value="logoutOnly">仅显示登出记录</option>
                    </select>
                </form>
            </div>
            <div class="col-md-2">
                <button class="btn btn-success" id="search_button">
                    <span class="glyphicon glyphicon-search"></span> <span>查询</span>
                </button>
            </div>
        </div>
        <div class="row" style="margin-top:20px">
            <div class="col-md-6">
                <form action="" class="form-inline">
                    <label class="form-label">日期范围：</label>
                    <input class="form_date form-control" id="start_date" placeholder="起始日期">
                    <label class="form-label">&nbsp;&nbsp;-&nbsp;&nbsp;</label>
                    <input class="form_date form-control" id="end_date" placeholder="结束日期">
                </form>
            </div>
        </div>
        <div class="row" style="margin-top:25px">
            <div class="col-md-12">
                <table class="table table-striped" id="accessRecordDOS"></table>
            </div>
        </div>
    </div>
</div>